<template>
  <component :is="name" :formItem="formItem"></component>
</template>
<script lang="ts" setup>
import Approve from "./Approve.vue";
import SendTag from "./SendTag.vue";
import DefaultTag from "./DefaultTag.vue";
import { ref, watch } from "vue";

const props = defineProps<{
  formItem: any
}>();
const name = ref(DefaultTag);


const updateWorkflow = () => {
  if (props.formItem?.type == "Workflow") {
    name.value = DefaultTag;
  }
  if (props.formItem?.type == "AuditActivity") {
    name.value = Approve;
  }
  if (props.formItem?.type == "TaskApproveActivity") {
    name.value = Approve;
  }
  if (props.formItem?.type == "SignalReceived") {
    name.value = SendTag;
  }
  if (props.formItem?.type == "Finish") {
    name.value = DefaultTag;
  }
};
updateWorkflow();

watch(
  () => props.formItem,
  () => {
    updateWorkflow();
  },
  {
    deep: true
  }
);
</script>